<!--  -->
<template>
<div class='' style="background: #F5F7F9;width: 100%;height: 1500px;overflow: hidden">
    <div style="font-size: 18px;margin-left: 280px;margin-top: 20px;font-weight: 550">新增采购订单</div>
    <!--采购信息-->
    <div style="width: 65%;height: 600px;background: white;margin-top: 10px;margin-left: 260px;border-radius: 3px">
        <div style="width: 100%;height:50px;font-size: 15px;border-bottom: 2px solid #F5F7F9;line-height: 50px">&nbsp;&nbsp;&nbsp;&nbsp;采购信息</div>

        <el-form :model="form" label-width="100px" size="large">
            <el-row style="margin-left: 40px">
                <el-col :span="12" style="margin-top: 20px">
                    <el-form-item label="采购单号">
                        <el-input v-model="form.procureNo" placeholder="系统自动生成" disabled style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="采购日期">
                        <el-date-picker v-model="form.procureTime" type="date" placeholder="选择日期" style="width: 300px"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="采购人员">
                        <el-select v-model="form.procurePersonid" placeholder="请选择" style="width: 300px" @change="personChange">
                            <el-option v-for="person in peopleData" :key="person.peopleManagementId" :label="person.peopleManagementName" :value="person.peopleManagementId"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="供应商">
                        <el-select v-model="form.procureSupplierid" placeholder="请选择" style="width: 300px" @change="supplierChance">
                            <el-option v-for="supplier in supplierData" :key="supplier.id" :label="supplier.supplierName" :value="supplier.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="联系方式">
                        <el-input v-model="form.procureContacts" disabled style="width: 300px"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12" style="margin-top: 20px">
                    <el-form-item label="采购主题">
                        <el-input v-model="form.procureTheme" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="采购部门">
                        <el-select v-model="form.procureDepartid" placeholder="请选择" style="width: 300px">
                            <el-option v-for="department in departmentData" :key="department.departmentManagementId" :label="department.departmentName" :value="department.departmentManagementId" ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="联系方式">
                        <el-input v-model="form.procureContact" disabled style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="联系人">
                        <el-input v-model="form.procureContactPerson" disabled style="width: 300px"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="采购原因" style="margin-left: 40px">
                <el-input type="textarea" v-model="form.procureReason" :rows="3" style="width: 824px"></el-input>
            </el-form-item>
            <el-form-item label="备注" style="margin-left: 40px">
                <el-input type="textarea" v-model="form.procureRemark" :rows="3" style="width: 824px"></el-input>
            </el-form-item>
        </el-form>
    </div>
    <!--采购明细-->
    <div style="width: 65%;background: white;margin-top: 10px;margin-left: 260px;border-radius: 3px">
        <div style="width: 100%;height:50px;font-size: 15px;border-bottom: 2px solid #F5F7F9;line-height: 50px">&nbsp;&nbsp;&nbsp;&nbsp;采购明细</div>

        <div style="width: 100%;margin-top: 15px">
            <el-button type="success" style="width: 70px;height: 30px;margin-left: 10px" @click="openTable">添加</el-button>
            <el-button style="width: 70px;height: 30px;" @click="yichu">移除</el-button>

            <el-table :data="form.ledgerData" style="width: 100%" @selection-change="ledgerDataSelection">
                <el-table-column type="selection" align="center"></el-table-column>
                <el-table-column prop="spId" label="序号"  align="center" width="50px"></el-table-column>
                <el-table-column prop="spName" label="备件名称"  align="center" width="80px"></el-table-column>
                <el-table-column prop="spCode" label="备件编码"  align="center"></el-table-column>
                <el-table-column prop="spSpecification" label="规格型号"  align="center"></el-table-column>
                <el-table-column prop="spTypeName" label="备件类型"  align="center" width="90px"></el-table-column>
                <el-table-column prop="saUnit" label="备件单位"  align="center" width="80px"></el-table-column>
                <el-table-column label="采购数量"  align="center">
                    <template slot-scope="scope">
                        <el-input-number v-model="scope.row.quantity" :min="1" :max="scope.row.differ" @change="quantityChange(scope.row.quantity,scope.row.price,scope.row.spId)"></el-input-number>
                    </template>
                </el-table-column>
                <el-table-column label="备件单价（元）"  align="center">
                    <template slot-scope="scope">
                        <el-input-number v-model="scope.row.price" :min="0"  @change="quantityChange(scope.row.quantity,scope.row.price,scope.row.spId)"></el-input-number>
                    </template>
                </el-table-column>
                <el-table-column label="购买总金额"  align="center">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.total" :disabled="true"></el-input>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
    <!--最下面-->
    <div style="width: 100%;height: 50px;background: white;box-shadow: 0px -4px 4px rgb(226,228,229);position:fixed;top: 920px;z-index: 999">
        <div style="margin-left: 700px;margin-top: 15px">
            <el-button @click="closes">关闭</el-button>
            <el-button type="success" @click="okGos()">确认</el-button>
        </div>
    </div>
    <el-dialog
            title="选择备件"
            :visible.sync="dialogVisible"
            width="40%"
            :before-close="handleClose">
        <el-form ref="form" :model="procure" label-width="100px">
            <el-form-item style="margin-left: -100px">
                <el-input v-model="procure.codeName" style="width: 180px" placeholder="请输入备件编号/名称" @change="selAllSpareLedger"></el-input>
            </el-form-item>
            <el-form-item>
                <el-cascader
                        style="position: relative;left: 100px;top: -46px"
                        v-model="procure.spTypeId"
                        :options="options"
                        :props="props"
                        @change="handleChange"
                        clearable
                        expand-trigger="hover"
                        placeholder="请选择备件类型"
                ></el-cascader>
            </el-form-item>
            <el-button @click="chongzhi" style="position: relative;left: 420px;top: -93px">重 置</el-button>
        </el-form>
        <div style="position: relative;top: -70px">
            <!--表格-->
            <el-table
                    :data="LedgerList"
                    @selection-change="LedgerListSelection"
                    border
                    style="width: 92%;margin-top: 10px">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        fixed
                        align="center"
                        prop="spId"
                        label="序号"
                        width="55">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="spCode"
                        label="备件编码"
                        width="200">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="spName"
                        label="备件名称"
                        width="90">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="spSpecification"
                        label="规格型号"
                        width="90">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="spTypeName"
                        label="备件类型"
                        width="90">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="totalInventory"
                        label="总库存"
                        width="90">
                </el-table-column>
            </el-table>
            <!--分页-->
            <el-pagination
                    :current-page.sync="procure.page"
                    :page-size="procure.pagesize"
                    :page-sizes="[10, 20, 30, 40]"
                    :total="total"
                    background
                    layout="total, sizes ,prev, pager, next, jumper"
                    style="padding: 30px 0; text-align: center"
                    @current-change="selAllSpareLedger"
                    @size-change="handleSizeChanges"
            />
        </div>
        <span slot="footer" class="dialog-footer" style="position:relative;left: -50px;top: -50px">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitLed">确 定</el-button>
  </span>
    </el-dialog>

</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
    LedgerList:[],
    total:0,
    procure:{
        codeName:null,
        spTypeId:0,
        page:1,
        pageSize:10
    },
    tableData:[],
    dialogVisible:false,
    form: {
        procureNo: '',
        procureTime: '',
        procureContacts:'',
        procurePersonid: '',
        procureSupplierid: '',
        procureContact: '',
        procureTheme: '',
        procureDepartid: '',
        procureContactPerson: '',
        procureReason: '',
        procureRemark: '',
        ledgerData:[],
        procureApplicantid:1
    },
    //人员数据
    peopleData:[],
    //供应商数据
    supplierData:[],
    //部门数据
    departmentData:[],
    //备件类型树形数据
    options:[],
    props: {
        value: 'spId',
        label: 'spTypename',
        children: 'children'
    },
    selection:[],
    selections:[]
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
    okGos(){
        this.request.post("/spare/spare-parts/insertParts",this.form)
        .then(res=>{
            this.$message({
                showClose: true,
                message: '添加成功',
                type: 'success'
            });
            this.$router.push('/spareRequisition')
        })
    },
    closes(){
        this.$router.push('/spareRequisition')
    },
    quantityChange(val,val1,spId){
        if (val == undefined){

        }else if(val1 == undefined){

        } else {
            for (let i = 0; i < this.form.ledgerData.length; i++) {
                if (this.form.ledgerData[i].spId == spId){
                    this.form.ledgerData[i].total = val*val1
                }
            }
        }
    },
    yichu(){
        for (let i = 0; i < this.selections.length; i++) {
            for (let j = 0; j < this.form.ledgerData.length; j++) {
                console.log(this.form.ledgerData)
                if (this.selections[i].spId == this.form.ledgerData[j].spId){
                    this.form.ledgerData.splice(j, 1);
                    j = 0;
                }
            }
        }
    },
    ledgerDataSelection(val){
        this.selections = val
    },
    submitLed(){
        this.form.ledgerData = []
        for (let i = 0; i < this.selection.length; i++) {
            this.form.ledgerData.push(this.selection[i])
        }
        this.dialogVisible = false
    },
    LedgerListSelection(val){
        this.selection = val
    },
    selAllSpareLedger(){
        this.request.post("/spare/spare-ledger/selAllSpareLedger",this.procure)
            .then(res=>{
                this.LedgerList = res.data.items
                this.total = res.data.counts
            })
    },
    handleChange(value) {
        console.log(value)
        this.procure.spTypeId = value
        this.selAllSpareLedger()
    },
    //备件类型树形查询
    selAllSpareType(){
        this.request.get("/spare/spare-types/selAllSpareType")
            .then(res=>{
                this.options = res.data
            })
    },
    supplierChance(val){
        this.request.get("/system/supplier-management/selOneSuppByIds/"+val)
            .then(res=>{
                console.log(res)
                this.form.procureContacts = res.data.contactWay
                this.form.procureContactPerson = res.data.creator
            })
    },
    handleClose(done) {
        this.$confirm('确认关闭？')
            .then(_ => {
                done();
            })
            .catch(_ => {});
    },
    personChange(val){
        this.request.get("/system/people-management/selOnePeoples/"+val)
        .then(res=>{
            this.form.procureContact = res.data.cellPhone
        })
    },
    //分页跳转数据
    handleSizeChanges(pageSize) {
        this.procure.pagesize = pageSize;
        this.selAllSpareLedger();
    },
    //查询人员数据
    selAllPeople(){
        this.request.get("/system/people-management/selAllPeople")
            .then(res=>{
                this.peopleData = res.data
            })
    },
    //查询部门数据
    selAllDepartment(){
        this.request.get("/system/department-management/selAllDepartment")
            .then(res=>{
                this.departmentData = res.data
            })
    },
    //查询供应商数据
    selAllSupplier(){
        this.request.get("/system/supplier-management/selAllSupplier")
            .then(res=>{
                this.supplierData = res.data
            })
    },
    chongzhi(){
        this.procure.codeName = null
        this.procure.spTypeId = 0
        this.selAllSpareLedger()
    },
    openTable(){
        this.selAllSpareType()
        this.selAllSpareLedger()
        this.dialogVisible = true
    },
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {
    this.selAllPeople()
    this.selAllDepartment()
    this.selAllSupplier()
},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>

</style>
